<template>
  <div class="container-fluid p-0">
    <!-- 导航栏 -->
    <header>
      <header-nav></header-nav>
    </header>
    <div>
      <Crumbs />
    </div>

    <div><router-view></router-view></div>


    <footer>
      <footer-nav></footer-nav>
    </footer>

    <!-- 置顶按钮 -->
    <div v-show="showScrollButton" @click="scrollToTop" class="scroll-to-top btn">
      <font-awesome-icon style="color: white;" icon="angle-up" />
    </div>
  </div>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import FooterNav from "../components/FooterNav.vue";
import Crumbs from "../components/Crumbs.vue";

export default {
  name: "index",
  components: {
    HeaderNav,
    FooterNav,
    Crumbs,
  },
  data() {
    return {
      showScrollButton: false, // 控制置顶按钮的显示与隐藏
    };
  },
  methods: {
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    handleScroll() {
      this.showScrollButton = window.scrollY > 200; // 当滚动超过200px时显示按钮
    }
  },
  mounted() {
    // 添加滚动事件监听器
    window.addEventListener('scroll', this.handleScroll);
    // 确保在组件卸载时移除事件监听器
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('scroll', this.handleScroll);
    });
  }
};
</script>

<style scoped>
/* 置顶按钮样式 */
.scroll-to-top {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 80px;
  right: 40px;
  /* display: none; */
  z-index: 1000;
  border-radius: 50%;
  background-color: rgba(254, 161, 22, 1);
  transition: opacity 0.3s ease-in-out;
}

.scroll-to-top:hover {
  background-color: rgba(16, 136, 150, 1) !important;
  transition: all .3s ease-in-out;
}

/* 显示按钮时的样式 */
.scroll-to-top.v-show {
  display: block;
  opacity: 1;
}
</style>